<template>
  <ul class="about-article fx">
    <li
      class="item cs fx-c"
      :class="{ 'active-class': isActive }"
      @click="handleClick(aboutArticle.userId)"
    >
      <a-icon class="ico" type="like" /> {{ agree }}
    </li>
    <li class="item cs fx-c"><a-icon class="ico" type="message" /> 评论</li>
    <li class="item cs fx-c"><a-icon class="ico" type="share-alt" /> 分享</li>
  </ul>
</template>

<script>
import { addAgree } from "@/api/article";
export default {
  name: "AboutArticle",
  props: {
    aboutArticle: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    const isAgree = !!(this.aboutArticle.agreeUsers.find((item) => {
      return item.id === this.$store.state.user._id;
    }));
    return {
      isActive: isAgree ? true : false,
      defaultAgree: isAgree,
      agree: this.aboutArticle.agree
    };
  },
  methods: {
    async handleClick(userId) {
      const artId = this.aboutArticle.artId;
      if (!this.defaultAgree) {
        // 点赞
        const r = await addAgree(artId, 1, userId);
        if (r.code === 1) {
          this.isActive = true;
          this.$message.success(r.msg);
          this.agree = r.agree;
        } else {
          this.$message.error(r.msg);
        }
      } else {
        // 取消点赞
        const r = await addAgree(artId, -1, userId);
        if (r.code === 1) {
          this.isActive = false;
          this.$message.success(r.msg);
          this.agree = r.agree;
        } else {
          this.$message.error(r.msg);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.about-article {
  padding: 0.5rem;
  .item {
    flex: 1;
    padding: 0.5rem 0;
    border-right: 2px solid #eaeaea;
    .ico {
      margin-right: 0.5rem;
    }
    &.active-class {
      color: #1dc400;
    }
    &:last-child {
      border: none;
    }
  }
}
</style>